import React, { Fragment, useState } from 'react';
import { Modal } from 'antd';
import ProForm, { ProFormSelect, ProFormDependency, ProFormTextArea } from '@ant-design/pro-form';
import { useIntl, FormattedMessage } from 'umi';
import { queryProvince } from '../service';

const Address = (props) => {
  const intl = useIntl();
  const [citys, setCitys] = useState([]);
  const [areas, setAreas] = useState([]);
  const [cityKey, setCityKey] = useState(-1);
  const [areaEnum, setAreaEnum] = useState([]);
  const { checked, onChange } = props;
  let values = {};
  if (props.checked) {
    values = props.checked;
  }
  return (
    <Fragment>
      <ProForm.Group size={8}>
        <ProFormSelect
          fieldProps={{
            labelInValue: true,
            onChange: (val) => {
              console.log('province', val);
              values.province = val;
              onChange(values);
            },
          }}
          value={values.province}
          //value={{ value: 6, label: '吉林省', key: 6 }}
          name="province"
          request={async () => {
            return queryProvince().then(({ data }) => {
              console.log('data', data);
              setCitys(data);
              // values.city = { label: '', value: null };
              // values.district = { label: '', value: null };
              // console.log('queryProvince', citys);
              return data.map((item, index) => {
                return {
                  label: item.name,
                  value: item.code,
                };
              });
            });
          }}
        />
        <ProFormDependency name={['province']}>
          {({ province }) => {
            return (
              <ProFormSelect
                params={{
                  key: province?.value,
                }}
                name="city"
                // width="sm"
                // disabled={!province}
                value={values.city}
                fieldProps={{
                  labelInValue: true,
                  onChange: (val) => {
                    let district = [];
                    areas.map((item, index) => {
                      // console.log('item', item);
                      if (item.code == val.key) {
                        //return ;
                        district = item.childs;
                        return;
                      }
                    });
                    const areasEnum = district.map((item, index) => {
                      return {
                        label: item.name,
                        value: item.code,
                      };
                    });
                    // console.log('areasEnum', areasEnum);
                    setAreaEnum(areasEnum);
                    setCityKey(val.key);
                    values.city = val;
                    onChange(values);
                  },
                }}
                request={async () => {
                  if (!province?.key) {
                    return [];
                  }
                  // console.log('city', citys);
                  // console.log('province.key', province.key);
                  let area = [];
                  citys.map((item, index) => {
                    console.log('item', item);
                    if (item.code == province.key) {
                      //return ;
                      area = item.childs;
                      //console.log('area', area);
                      setAreas(item.childs);
                      return;
                    }
                  });
                  console.log('area', area);

                  //values.district = { label: '', value: null };
                  return area.map((item, index) => {
                    return {
                      label: item.name,
                      value: item.code,
                    };
                  });
                }}
              />
            );
          }}
        </ProFormDependency>
        <ProFormSelect
          name="district"
          // width="sm"
          //disabled={cityKey == -1}
          options={areaEnum}
          value={values.district}
          fieldProps={{
            labelInValue: true,
            onChange: (val) => {
              console.log('district', val);
              values.district = val;
              onChange(values);
            },
          }}
        />
      </ProForm.Group>
      <ProFormTextArea
        name="detailed"
        width="md"
        value={values.address}
        fieldProps={{
          style: {
            marginBottom: '-25px',
          },
          onChange: (e) => {
            console.log('detailed', e.target.value);
            values.detailed = e.target.value;
            onChange(values);
          },
        }}
        placeholder="详细地址"
      />
    </Fragment>
  );
};

export default Address;
